<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='../vue.js'></script>
</head>

<body>
    <div id='app'>
        <h1 @click="show" class="title" style="color: red">父组件</h1>
        <hr>
        <cell @click="show" aaa="bbb" class="title" style="color: red"></cell>
    </div>
</body>
<!-- 
    属性透传：
    给组件直接设置系统属性
-->
<template id="cell">
    <!-- 属性透传的时候，最好只有一个根标签，如果多个根标签的时候，不知道透传给谁 -->
    <!-- 也可以通过 v-bind 指定将属性透传到哪个根标签中 -->
    <!-- <h1 v-bind="$attrs">你好中国</h1>
    <h1 :="$attrs">你好世界</h1> -->
    <h1>你好世界</h1>
</template>

<script>

    const cell = {
        template: '#cell',
        // 设置不允许属性透传
        // inheritAttrs: false,
        // 属性透传的时候不要通过 props 接收，接收了之后就无法透传了
        // props: ['style']
    }

    const app = {
        data() {
            return {}
        },
        methods: {
            show() {
                alert('显示了')
            }
        },
        components: {
            cell
        }
    }
    const vm = Vue.createApp(app).mount('#app')
</script>

</html>